<template>
  <div class="detailPageCss">
    <div class="titleCss">{{ $route.query.id ? '' : '添加'}}医疗卫生</div>
    <div class="bodyCss">
      <el-form ref="form" :model="formData" label-width="140px">
        <el-row>
          <el-form-item label="医疗机构名称">
            <el-input v-model="formData.data1" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="机构代码">
            <el-input v-model="formData.data2" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="营业执照">
            <el-upload
              class="upload-demo"
              ref="upload"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :multiple="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="执业范围">
            <el-select v-model="formData.data4" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in data4Options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="诊疗科室">
            <el-select v-model="formData.data5" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in data5Options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="所在区/县">
            <el-cascader
              v-model="formData.data6"
              :options="data6Options"
              placeholder="请选择"
              style="width:100%;"
              />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="镇/街道">
            <el-cascader
              v-model="formData.data7"
              :options="data7Options"
              placeholder="请选择"
              style="width:100%;"
              />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="医院级别">
            <el-select v-model="formData.data8" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in data8Options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="是否预防接种机构">
            <el-radio-group v-model="formData.data9">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备案状态">
            <el-button type="primary">查询备案状态</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
      <el-button type="primary" @click="submitBtn" v-if="!$route.query.id">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getCascaderOptionsFun , getSelectOptionsFun } from '@/utils/business.js'
export default {
  data(){
    return{
      formData:{
        data1:null,
        data2:null,
        data3:null,
        data4:null,
        data5:null,
        data6:null,
        data7:null,
        data8:null,
        data9:null,
      },
      data4Options:[],
      data5Options:[],
      data6Options:[],
      data7Options:[],
      data8Options:[],
    }
  },
  mounted(){
    this.data4Options = getSelectOptionsFun()
    this.data5Options = getSelectOptionsFun()
    this.data8Options = getSelectOptionsFun()
    this.data6Options = getCascaderOptionsFun()
    this.data7Options = getCascaderOptionsFun()
  },
  methods:{
    submitBtn(){
      this.$router.back()
    },
    goBackBtn(){
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.detailPageCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .titleCss{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .bodyCss{
    overflow-y: auto;
    height: calc( 100% - 140px );
    margin-top: 40px;
    padding: 0 25%;
    padding-bottom: 20px;
  }
  .bottomBtnCss{
    margin-top: auto;
    text-align: right;
  }
}
::v-deep .el-upload,::v-deep .el-upload-dragger{
  width: 100%;
}
</style>